import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import App2 from './App2';
import App3 from './App3';
import App4 from './App4';
import App5 from './App5';
import App6 from './App6';
import Vshow from './Vshow';
import Robotview from './Robotview'
import reportWebVitals from './reportWebVitals';

// 兄弟组件传值案例
class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count:0
    }
  }

  onaddnum=()=>{
    console.log('onaddnum')
    this.setState({
      count:this.state.count+1
    })
  }

  render () {
    return (
      <div>
          <Child1 count={this.state.count}></Child1>
          <Child2 onaddnum1={this.onaddnum}></Child2>
      </div>
    )
  }
}


const Child1 = (props) =>{
   return (
     <h1>计数器 : {props.count}</h1>
   )
}

const Child2 = (props) =>{
  return (
    <button onClick={()=>props.onaddnum1()}>+1</button>
  )
}



//  组件共享数据案例 provider consumer
// Provider  提供数据的人   Consumer 消费数据的人 
const {Provider,Consumer} = React.createContext()

class App10 extends React.Component {
  render () {
     return (
       <Provider value={{a:999,b:'meixi'}}>
            <div>
                 App10
                 <Child11></Child11>
            </div>
       </Provider>
     )
  }
}
const Child11 = props =>{
  return (
     <div>
        <p>我是child11</p>
        <Consumer>
             {
               data11=> <h1>我是child11 数据---- {data11.a} </h1>
             }
        </Consumer>
        <Child12></Child12>
     </div>
  )
}
const Child12 = props =>{
  return (
     <div>
        <p>我是child12</p>
        <Consumer>
             {
               data11=> <h1>我是child12 数据---- {data11.b} </h1>
             }
        </Consumer>
       
     </div>
  )
}





ReactDOM.render(
 
    // <App3 fn1={()=>{console.log(66666)}} people={['梅西','cluo']} name='cluo' age={18}/>,
  // < App4><h1>我是内部的  </h1></ App4>,
  // <App5
      
  // array = {[1,2,3]}
  // boolean = {true}
  // ></App5>,

  // <Vshow></Vshow>,
  <App6
    // b1={(a)=><p>鼠标当前位置 {a.x}---{a.y}</p>}
    b1 = {(a)=> <div><img
      src='https://ftp.bmp.ovh/imgs/2021/06/0b6cb6a38f3fdde5.png' 
      style={{
        position:'absolute',
        top:a.y-100,
        left:a.x-100
      }}
     /></div>}
  ></App6>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
